<!--  -->
<template>
  <div class="container flex-column ">
    <!-- nav -->
    <div class="nav flex-column justify-center pd-left-20">
      <div class="flex-row align-center">
        <i class="el-icon-arrow-left" @click.stop="handleBack"></i>
        <div class="fz-14 mg-left-10" style="color: #333;">资产档案列表</div>
      </div>
      <div class="flex-row align-center mg-top-10">
        <svg-icon class="icon" icon-class="delete-icon"></svg-icon>
        <div class="fz-14 mg-left-10" style="color: #D12D1F;">
          资产类型主要用于同类资产整合，新建后可在资产档案中进行选择。
        </div>
      </div>
    </div>

    <div class="split-line"></div>

    <div class="btn-container flex-row justify-between align-center ">
      <!-- 添加按钮 -->

      <div class="flex-row align-center">
        <custom-button title="新建资产类型" class="custom-btn" @click="handleAdd" />
      </div>

      <div class="flex-row align-center">
        <el-input v-model="queryInfo.keyword" class="input-width" placeholder="请输入资产类型查询">
          <div slot="suffix" class="el-icon-search search-button" @click="handleSearch"></div>
        </el-input>
      </div>
    </div>

    <div class="flex-sub pd-20" style="background: #fff;">
      <el-table
        ref="table"
        v-loading="loading"
        :data="tableData"
        height="98%"
        :cell-style="{ background: '#fff' }"
        header-cell-class-name="table-header-cell"
        header-row-class-name="table-header-row"
      >
        <el-table-column prop="typeName" label="资产类型" />
        <el-table-column prop="updateTime" label="最近修改时间">
          <template v-slot="{row}">
            {{row.updateTime | dateTimeFormatter}}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="200px" align="center">
          <template slot-scope="scope">
            <div class="flex-row-center">
              <div class="btn-edit" @click="handleEdit(scope.row)">修改</div>
              <div class="pd-lr-10 fz-14" style="color: #999;">|</div>
              <div class="delete-text" @click="handleDelete(scope.row.id)">删除</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <el-pagination
      hide-on-single-page
      background
      layout="prev, pager, next, total, jumper"
      :total="total"
      :page-size="queryInfo.pageSize"
      @current-change="handlePageChange"
    />

    <edit-dialog
      :isShow="isShowEdit"
      @close="isShowEdit = false"
      :initData="editData"
      @submit="handleSubmit"
    />
  </div>
</template>

<script>
import { apiAddAssetType, apiEditAssetType, apiGetAssetTypeList, apiDeleteAssetType } from './api'
import EditDialog from './components/edit-dialog.vue'

export default {
  name: 'AssetFile',
  components: { EditDialog },

  data() {
    return {
      queryInfo: {
        pageSize: 14,
        pageNo: 1,
        keyword: '',
      },
      total: 0,
      tableData: [],
      loading: false,
      isShowEdit: false,
      editData: {},
    }
  },

  computed: {},

  mounted() {
    this.getTableData()
  },

  methods: {
    handleSearch() {
      this.getTableData()
    },

    handleAdd() {
      this.editData = { identityEnum: this.activeTab }
      this.isShowEdit = true
    },

    handleDelete(id) {
      this.$confirm('确定删除选中的资产类型吗？', '提示').then(async () => {
        //  删除数据
        try {
          await apiDeleteAssetType({ id })
          this.$message.success('删除成功！')
          this.getTableData()
        } catch (error) {
          console.log(`apiDeleteAssetType error ${error.message}`)
        }
      })
    },

    handleEdit(item) {
      this.editData = item
      this.isShowEdit = true
    },
    async handleSubmit(form) {
      try {
        form.id ? await apiEditAssetType(form) : await apiAddAssetType(form)
        this.$message.success('提交成功！')
        this.isShowEdit = false
        this.getTableData()
      } catch (error) {
        console.log(`apiAddAssetType or apiEditAssetType error ${error.message}`)
      }
    },
    handlePageChange(pageNo) {
      this.queryInfo.pageNo = pageNo
      this.getTableData()
    },

    async getTableData() {
      //  查询
      try {
        const res = await apiGetAssetTypeList(this.queryInfo)
        this.tableData = res.records || []
        this.total = res.total || 0
      } catch (error) {
        console.log(`apiGetAssetTypeList error ${error.message}`)
      }
    },
    handleBack() {
      this.$router.back()
    },
  },
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  // padding: 20px;
  // padding: vw(20px);
  background: #f3f4f8;
  box-sizing: border-box;
}

.query-container {
  height: vh(70px);
  padding: 0 vw(20px);
  overflow: hidden;
  box-sizing: border-box;
}

.btn-edit {
  color: #0084ee;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.btn-delete {
  color: #d12d1f;

  &:hover {
    cursor: pointer;
    opacity: 0.7;
  }
}

.line {
  width: 100%;
  height: vh(10px);
  background: #f3f4f8;
}

::v-deep .el-form-item {
  margin-bottom: 0;
}

.table-container {
  padding: vw(20px);
}

::v-deep .el-tabs__nav .is-top {
  // margin-left: vw(30px);
}

::v-deep .el-tabs__active-bar {
  height: 3px;
  background: #d12d1f;
}

::v-deep .el-tabs__nav-wrap::after {
  height: 1px;
}

::v-deep .el-table__row {
  color: #999;
}

.tab {
  padding: 0 vw(20px);
  margin-top: vh(10px);
}

.custom-btn {
  // margin-left: vw(20px);
}

::v-deep .el-tabs__header {
  margin: 0;
}

.btn-container {
  padding-top: vw(20px);
  padding-right: vw(20px);
  // padding-bottom: vw(20px);
  padding-left: vw(20px);
  background: #fff;
}

.input-width {
  width: vw(350px);
  // height: vh(50px);
}

.search-button {
  height: 100%;
  padding-top: vh(8px);
  padding-right: vw(6px);
  line-height: 100%;
  cursor: pointer;
}

.table-data-container {
  width: 100%;
  height: 100%;
  padding: 0 vw(20px);
}

.nav {
  width: 100%;
  height: vw(74px);
  background: #fff;
}

.split-line {
  width: 100%;
  height: vh(20px);
  // background: #f3f4f8;
}

.icon {
  width: vw(14px);
  height: vw(14px);
}

.delete-text {
  color: #d12d1f;

  &:hover {
    cursor: pointer;
  }
}

.el-icon-arrow-left:hover {
  cursor: pointer;
}
</style>
